import React from 'react';
import { connect } from 'dva'
import queryString from 'query-string'
import { Button, Card,Tabs } from 'antd';
import PageHeaderLayout from 'components/Layout/PageHeaderLayout';
import List from "./List";
import OrderFilterExpand from 'components/Filter/OrderFilterExpand';
import OrderFilterUnExpand from 'components/Filter/OrderFilterUnExpand';

const settlementBatchs = ({ location, dispatch, settlementBatch, loading }) => {
  location.query = queryString.parse(location.search);
  const { items, pagination, currentItem, isExpand,currentType} = settlementBatch;
  const TabPane = Tabs.TabPane;

  const breadcrumbList = [
    {
        title: '财务管理',
        href: '/'
    }, {
        title: '结算批次',
        href: '/settlementBatch'
    }
];
  const listProps = {
    dataSource: items,
    loading: loading.effects['settlementBatch/query'],
    pagination,
    pageChangeAction: 'settlementBatch/query',
    dispatch,
    location,
    onShowDetail(record) {
      dispatch({
        type: 'settlementBatch/showDetail',
        payload: {
          recordId: record.id
        }
      });
    }
  };

  const filterProps = {
    filterItems: [
      {
        type: 'input',
        id: 'batchNumCustom',
        title: '结算批次号'
      },
       {
        type: 'select',
        id: 'settlementType',
        title: '结算方式',
        options: [
          {
            value: 'RECEIVABLE',
            name: '应收'
          }, {
            value: 'PAYABLE',
            name: '应付'
          }
        ]
      }, {
        type: 'input',
        id: 'creatorName',
        title: '创建人'
      },
     {
        type: 'dateRule',
        id: 'createTime',
        dateFormat: 'YYYY/MM/DD HH:mm:ss',
        title: '创建时间'
      }
    ],
    onFilterChange(value) {
      dispatch({
        type: 'settlementBatch/query',
        payload: {
          ...value
        }
      })
    },
    isExpand,
    noExpand() {
      dispatch({ type: 'settlementBatch/unExpandFilter', payload: {} })
    },
    expand() {
      dispatch({ type: 'settlementBatch/expandFilter', payload: {} })
    }
  }
  const tabChange = (key) => {
    dispatch({
      type: 'settlementBatch/setCurrentTab',
      payload:key
    })
    dispatch({
      type: 'settlementBatch/query'
    })
  }
  return (
    <PageHeaderLayout title="结算批次" breadcrumbList={breadcrumbList}>
      <Card bordered={false}>

        <OrderFilterUnExpand {...filterProps} />
        <Tabs onChange={tabChange} type="card" activeKey={currentType}>
            <TabPane tab="余额账户" key="SALES">
              <List {...listProps} />
            </TabPane>
            <TabPane tab="第三方账户" key="THIRD">
              <List {...listProps} />
            </TabPane>
            <TabPane tab="优惠券账户" key="COUPON">
              <List {...listProps} />
            </TabPane>
          </Tabs>
      </Card>
    </PageHeaderLayout>

  )
};

export default connect(({ settlementBatch, loading }) => ({ settlementBatch, loading }))(settlementBatchs)
